<script lang="js" setup name="StudyItem">
import { computed, ref } from "vue";

const emit = defineEmits(["selected"]);

const props = defineProps({
	study: {
		type: Object,
		required: true
	},
	pos: {
		type: Number,
		required: true
	}
});

const IsSel = ref(false);
const firstText = computed(() => {
	let text = props.study.patientName;
	// if (config.desensitize) {
	// 	text = Utils.desensitizeSubstring(text, 1, -1);
	// }
	text += "\u00a0\u00a0";
	text += props.study.gender;
	text += "\u00a0\u00a0\u00a0\u00a0";
	text += props.study.studyAge;
	return text;
});
const secondText = computed(() => {
	let text = props.study.radiId;
	text += "\u00a0\u00a0-\u00a0\u00a0";
	text += props.study.studyId;
	return text;
});

const onClick = () => {
	// IsSel.value = true;
	emit("selected", { pos: props.pos });
};

const getSeriesList = () => {
	return props.study.seriesList;
};

const getStudy = () => {
	return props.study;
};

const setSelected = (bSel) => {
	IsSel.value = bSel;
};

defineExpose({
	getSeriesList,
	getStudy,
	setSelected,
});
</script>

<template>
	<div :class="['study-item', IsSel ? 'selected' : 'unselect']" @click="onClick">
		<p class="study-item__text">{{ firstText }}</p>
		<p class="study-item__text">{{ secondText }}</p>
		<p class="study-item__text">{{ study.studyDate.substring(0, 15) }}</p>
		<div v-if="study.isMain" class="mainstudy">
			<p>主检查</p>
		</div>
	</div>
</template>

<style lang="scss" scoped>
@use "sass:color";
.study-item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	background-color: var(--color-study-bg);
	height: 100%;
	width: 160px;
	font-size: 16px;

	padding: 5px 5px 0 5px;
	border-radius: 4px;
	border-top: 1px solid #555;
	border-left: 1px solid #555;
	border-right: 2px groove #999;
	border-bottom: 2px groove #999;
	flex-shrink: 0;
	cursor: default;

	// &:hover {
	//     background-color: var(--color-study-hover);
	// }
	&__text {
		width: 100%;
		// color: #000;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		line-height: 20px;
		flex: 1;
		margin: 0;
	}
}

.mainstudy {
	display: flex;
	justify-content: center;
	align-items: center;
	// background-color: var(--color-study-hover);
	margin: 6px 0 2px 0;
	// flex: 1;
	width: 100%;
	border-radius: 3px;

	p {
		margin: 0;
	}
}

.selected {
	background-color: var(--color-study-active);
	// background-color: #2a8d80;
	color: var(--color-selected-text);

	.mainstudy {
		// background-color: color.scale(var(--color-study-active), $lightness: -10%);
		// background-color: #2a8d80;
		background-color: var(--color-study-active-darker);
	}
}

.unselect {
	background-color: var(--color-study-bg);
	color: var(--color-unselect-text);

	.mainstudy {
		// background-color: darken(#d0d5d9, 10%);
		background-color: var(--color-study-bg-darker);
	}
}
</style>
